<template>
  <main :class="['aui-content', { 'aui-content--tabs': $route.meta.isTab }]">
    <!-- tab展示内容 -->
    <template v-if="$route.meta.isTab">
      <el-dropdown class="aui-content--tabs-tools">
        <i class="el-icon-arrow-down"></i>
        <el-dropdown-menu slot="dropdown" :show-timeout="0">
          <el-dropdown-item
            @click.native="tabRemoveHandle($store.state.contentTabsActiveName)"
          >{{ $t('contentTabs.closeCurrent') }}</el-dropdown-item>
          <el-dropdown-item
            @click.native="tabsCloseOtherHandle()"
          >{{ $t('contentTabs.closeOther') }}</el-dropdown-item>
          <el-dropdown-item @click.native="tabsCloseAllHandle()">{{ $t('contentTabs.closeAll') }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tabs
        v-model="$store.state.contentTabsActiveName"
        @tab-click="tabSelectedHandle"
        @tab-remove="tabRemoveHandle"
      >
        <el-tab-pane
          v-for="item in $store.state.contentTabs"
          :key="item.cname"
          :name="item.cname"
          :label="item.title"
          :closable="item.name !== 'home'"
          :class="{ 'is-iframe': tabIsIframe(item.iframeURL) }"
        >
          <template v-if="item.name === 'home'">
            <svg slot="label" class="icon-svg aui-content--tabs-icon-nav" aria-hidden="true">
              <use xlink:href="#icon-home" />
            </svg>
          </template>
          <iframe
            v-if="tabIsIframe(item.iframeURL)"
            :src="item.iframeURL"
            width="100%"
            height="100%"
            frameborder="0"
            scrolling="yes"
          ></iframe>
          <keep-alive v-else>
            <router-view v-if="item.cname === $store.state.contentTabsActiveName" />
          </keep-alive>
        </el-tab-pane>
      </el-tabs>
    </template>
    <!-- 其他方式, 展示内容 -->
    <template v-else>
      <keep-alive>
        <router-view />
      </keep-alive>
    </template>
  </main>
</template>

<script>
import { isURL } from "@/utils/validate";
export default {
  data() {
    return {};
  },
  methods: {
    // tabs, 是否通过iframe展示
    tabIsIframe(url) {
      return isURL(url);
    },
    // tabs, 选中tab
    tabSelectedHandle(tab) {
      tab = this.$store.state.contentTabs.filter(
        item => item.cname === tab.name
      )[0];
      if (tab) {
        this.$router.push({
          name: tab.name,
          params: { ...tab.params },
          query: { ...tab.query }
        });
      }
    },
    // tabs, 删除tab
    tabRemoveHandle(tabName) {
      if (tabName === "home") {
        return false;
      }
      // 目前校验课程新增和编辑
      this.validIsSave(tabName);
      
    },
    // 提取关闭当前tab中的公用逻辑
    tabRemoveCommon(tabName){
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        item => item.cname !== tabName
      );
      if (this.$store.state.contentTabs.length <= 0) {
        this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName =
          "home";
        return false;
      }
      // 当前选中tab被删除
      if (tabName === this.$store.state.contentTabsActiveName) {
        let tab = this.$store.state.contentTabs[
          this.$store.state.contentTabs.length - 1
        ];
        this.$router.push({
          name: tab.name,
          params: { ...tab.params },
          query: { ...tab.query }
        });
      }
    },
    // 课程模块 新建或编辑课程，若未保存内容，直接关闭新建或编辑选项卡，则弹出提示
    validIsSave(tabName) {
      // 如果tabName能匹配到课程新建或编辑页面
      let reg = new RegExp("/product-course/.*/(create|edit).*");
      let reg1 = new RegExp("product-course-(create|edit)-.*");
      if (!tabName.includes('lesson') && (reg.test(tabName) || reg1.test(tabName))) {
        this.$confirm("离开将丢失已编辑的内容，确定离开吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.tabRemoveCommon(tabName);
          }) 
          .catch(() => {

          });
      } else {
        this.tabRemoveCommon(tabName);
      }
    },
    // tabs, 关闭其它
    tabsCloseOtherHandle() {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        item => {
          return (
            item.name === "home" ||
            item.cname === this.$store.state.contentTabsActiveName
          );
        }
      );
    },
    // tabs, 关闭全部
    tabsCloseAllHandle() {
      this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
        item => item.name === "home"
      );
      this.$router.push({ name: "home" });
    }
  }
};
</script>
